<template>
  <el-collapse-item
    :name="mapkey"
    class="detail_collapse-item"
    :style="bolindex ? '' : 'margin-bottom: 12px'"
  >
    <template #title>
      <div
        class="DINAlternate"
        style="font-weight: bold; font-size: 14px; color: #000; height: 20px; line-height: 20px"
      >
        {{ homeState.matchDetail.primaryData.sport_type == 'soccer' ? homeState.textmap.soccer_handicap[homeState.matchDetail.activetab[1]] : homeState.textmap.basketball_handicap[homeState.matchDetail.activetab[1]]
        }}{{ homeState.matchDetail.primaryData.sport_type == 'soccer' ? homeState.textmap.soccer_handicap[homeState.matchDetail.activetab[0]] : homeState.textmap.basketball_handicap[homeState.matchDetail.activetab[0]]
        }}{{ homeState.matchDetail.primaryData.sport_type == 'soccer' ? homeState.textmap.soccer_handicap[mapkey] : homeState.textmap.basketball_handicap[mapkey] }}
      </div>
    </template>
    <template #icon="{ isActive }">
      <span class="icon-ele">
        <img v-if="isActive" style="width: 16px; height: 16px" src="@/assets/home/shouqi.png" alt="" />
        <img v-else style="width: 16px; height: 16px" src="@/assets/home/zhankai.png" alt="" />
      </span>
    </template>
    <div class="detail_collapse-item_content">
      <Content1 v-if="mapkey == 'M'" :data="data" />
      <Content2 v-else :data="data" />
    </div>
  </el-collapse-item>
</template>

<script setup>
import { onMounted } from 'vue'
import Content1 from './components/Content1.vue'
import Content2 from './components/Content2.vue'
const props = defineProps({
  data: Array,
  bolindex: Boolean,
  mapkey: String,
})

const { homeStore, homeState } = inject('HomeStore')
</script>

<style lang="scss" scoped>
</style>

<style>
.detail_collapse-item .el-collapse-item__header {
  height: 36px;
  display: flex;
  justify-content: space-between;
  border: none;
  background-color: #f8f9fe;
  padding: 0 12px 0 8px;
}
.detail_collapse-item .el-collapse-item__header .icon-ele {
  height: 20px;
  line-height: 20px;
}

.detail_collapse-item .el-collapse-item__wrap {
  border: none;
  background-color: #f8f9fe;
}
.detail_collapse-item .el-collapse-item__content {
  padding: 0;
}
.detail_collapse-item_content {
  padding: 0 4px 4px 8px;
}
</style>